<template>
  <div class="container">
    <div class="header-box">
      <el-row class="row">
        <el-col class="pic" :span="4">
          <!-- 属性绑定会有大问题，需要提前注意 等待拓展-->
          <a >
            <img
              class="school"
              :src="school.url"
              :alt="school.meta"
            />
          </a>
        </el-col>
        <el-col :span="12" class="det">
          <div class="detail">
            <div class="course-title">
              <!-- 等待拓展 点击后显示课程的详细信息-->
              <a class="t-t0">
                {{course.name}}
              </a>
            </div>
            <div class="member">
              <a> {{course.teacher}}</a>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="user">
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {  mapMutations,mapGetters } from "vuex";
import {getCourseById} from "@/api/course.js"

export default {
  components:{
   
  },
  props: ["courseId"],
  // 数据源
  data() {
    return {
      course:{},
      school:{
        url:'https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/wbd765.png',
        meta:"尚未绑定学校信息"
      }
    };
  },
  //生命周期函数---
  mounted() {
    this.getCourse();
  },
  //基本方法
  methods: {
    getCourse(){
      getCourseById(this.courseId).then((res)=>{
        if(res.code==200)
        {
          this.course=res.data;
        }else{

        }
      })
    },
        ...mapMutations({
      changeOffOnline: "changeOffOnline",
    }),
    personalInfor(){
      this.$router.push({
        path:'/user/center/information'
      })
    },
     quit() {
      ElMessage({
        type: "success",
        message: "拜拜",
      });
      window.sessionStorage.removeItem("token");
      window.sessionStorage.removeItem("store");
      this.changeOffOnline();
      this.$router.push({
           path: "/home",
      })
    },
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed:{
    ...mapGetters({
      userName:'getUserName'
    })
  },
};
</script>

<style   scoped>
.container {
  height: 75px;
  background: rgb(248, 248, 248);
}
a {
  cursor: pointer;
  text-decoration: none;
  color: #00c758;
  background-color: rgba(0, 0, 0, 0);
  transition: color 0.3s;
}
.header-box {
  height: 100%;
  width: 100%;
}
.row {
  height: 100%;
}
el-col {
  border-right: 1px solid rgb(204, 204, 204);
}
.pic {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgb(204, 204, 204);
}
.det {
  display: flex;
  align-items: center;
  justify-content: center;
}
.school {
  width: 160px;
  height: auto;
}

.detail {
  height: 70px;
  width: 100%;
  margin-left: 30px;
}
.course-title {
  margin-top: 15px;
  width: 50%;
  height: 30px;
}

.t-t0 {
  color: #333;
  height: 30px;
  line-height: 30px;
  font-weight: bolder;
  float: left;
}
.t-t0:hover {
  color: #00c758;
}
.member {
  font-size: 9px;
  height: 15px;
  line-height: 15px;
  float: left;
  color: #00c758;
}

.member a:not(:last-child)::after {
  content: "、";
}
.user {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>